<template>
  <div style="margin: 5px 0; width: fit-content">
    <a-checkbox :disabled="auth !== 'edit'" :checked="checked"
      @click="() => checked = !checked">
      <span style="user-select:none;">
        {{ innerText }}
      </span>
    </a-checkbox>
  </div>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'CheckBoxInput',
  props: {
    auth: createProps(String, 'edit'),
    value: {
      type: [String, Number],
      default: undefined,
    },
    fieldConfig: createProps(Object)
  },
  methods: {
    change(v) {
      this.$emit('change', v);
      this.$emit('update:value', v);
      this.$emit('update:title', v + '' === '1' ? '勾选' : '不勾选');
      this.$emit('update', v);
    },
  },
  computed: {
    innerText() {
      return this.fieldConfig && this.fieldConfig.label;
    },
    checked: {
      set(v) {
        this.change(v && '1' || '0');
      },
      get() {
        if(!this.value) {
          this.change('0');
        }
        return this.value + '' === '1';
      },
    }
  }

};
</script>